<template>
    <div class="goodsdesc-container">
        <div class="mui-content-padded">
            <h2 style="text-align: center;margin-bottom: 10px">{{info.title}}</h2>
            <p class="subtitle">
                <span>发表时间:{{ info.add_time }}</span>
                <span>点击:{{ info.click }}次</span>
            </p>
            <hr>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;{{info.content1}}</p>
            <p>
                <img :src="info.img1" data-preview-src="" data-preview-group="1" />
            </p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;{{info.content2}}</p>
            <p>
                <img :src="info.img2" data-preview-src="" data-preview-group="1" />
            </p>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                info:{
                    title:'潘安湖攻略指南',
                    add_time:'2019-11-4 09:59:28',
                    click:6,
                    content1:'潘安湖是一个当代人工湖，位于江苏省徐州市贾汪区西南部，地处徐州主城区与贾汪城区中间地带，距两地均约18公里。该处本无湖，原是徐矿集团权台矿和旗山矿的采煤塌陷区域。2010年3月，贾汪区正式对采煤塌陷区实施改造。规划总面积52.89平方公里，其中核心区16平方公里。一期工程全面结束，投资14亿元，开园总面积达11平方公里，水域面积9.21平方公里，栽植大树16万棵，花卉植被100万平方米，水生植物98万平方米，品种300余种，大小19个湿地岛屿。',
                    img1:'http://127.0.0.1:3000/public/img/jp10.jpg',
                    content2:'2012年台湾作家张晓风来徐州寻 [1]  根祭祖时对潘安湖评价：“一潭碧水，用人工的方法，补救了另外一次人工的失误。诗人徐书信赋诗赞曰：“鹭影飞舟何处饮，池杉岸柳初成荫。潘安五月雨蛙鸣，璀璨榴花千里沁。” ”2013年11月，潘安湖水利风景区被水利部评为第13批国家级水利风景区。 [2]  2014年6月，经全国旅游景区质量等级评定委员会评定，潘安湖湿地公园被评为国家AAAA级旅游景区。　“潘安湖二期以南湖为核心，在煤矿塌陷地形成的大面积水域基础上，打造集游览观光、生态宜居、旅游度假、乡村民俗体验等为主的最美乡村湿地景观。”潘安湖风景区管理处党工委副书记周生宝介绍说，潘安湖南湖公园分为湿地科普展示景观区、入口及湿地主题景观区、湿地娱乐景观区、潘安文化形象展示区、乡居度假区五个部分，占地约3880亩，水域面积约1810亩，湿地面积303亩，总投资约2.8亿元，“十一“正式运营。',
                    img2:'http://127.0.0.1:3000/public/img/jp11.jpg'
                },
            }
        },
        created(){
            // this.getGoodsDesc()
        },
        methods:{
            // getGoodsDesc(){
            //     this.$http.get('api/goods/getinfo/' + this.id ).then(result => {
            //         if(result.body.status === 0){
            //             this.info = result.body.message;
            //         }
            //     })
            // }
        }
    }
</script>

<style lang="scss">
    .goodsdesc-container{
        padding:4px;
        h3{
            font-size:16px;
            color:#E60026;
            text-align:center;
            margin:15px 0;
        }
        .content{
            img{
                width:100%;
            }
        }
    }
    .mui-preview-image.mui-fullscreen {
        position: fixed;
        z-index: 20;
        background-color: #000;
    }
    .mui-preview-header,
    .mui-preview-footer {
        position: absolute;
        width: 100%;
        left: 0;
        z-index: 10;
    }
    .mui-preview-header {
        height: 44px;
        top: 0;
    }
    .mui-preview-footer {
        height: 50px;
        bottom: 0px;
    }
    .mui-preview-header .mui-preview-indicator {
        display: block;
        line-height: 25px;
        color: #fff;
        text-align: center;
        margin: 15px auto 4;
        width: 70px;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 12px;
        font-size: 16px;
    }
    .mui-preview-image {
        display: none;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    .mui-preview-image.mui-preview-in {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
    }
    .mui-preview-image.mui-preview-out {
        background: none;
        -webkit-animation-name: fadeOut;
        animation-name: fadeOut;
    }
    .mui-preview-image.mui-preview-out .mui-preview-header,
    .mui-preview-image.mui-preview-out .mui-preview-footer {
        display: none;
    }
    .mui-zoom-scroller {
        position: absolute;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        -webkit-backface-visibility: hidden;
    }
    .mui-zoom {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .mui-slider .mui-slider-group .mui-slider-item img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
    .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
        width: 100%;
    }
    .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
        display: inline-table;
    }
    .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
        display: table-cell;
        vertical-align: middle;
    }
    .mui-preview-loading {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
    }
    .mui-preview-loading.mui-active {
        display: block;
    }
    .mui-preview-loading .mui-spinner-white {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        height: 50px;
        width: 50px;
    }
    .mui-preview-image img.mui-transitioning {
        -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
        transition: transform 0.5s ease, opacity 0.5s ease;
    }
    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @-webkit-keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    p img {
        max-width: 100%;
        height: auto;
    }
    .subtitle{
        font-size:14px;
        color:-moz-cellhighlight;
        display:flex;
        justify-content: space-between;
    }
    img{
        border-radius: 5px;
        box-shadow: 2px 2px 5px #cccccc;
    }
</style>
